
<script>

import pageSetting from '@/components/lt/codeGenerator/pageSetting'
import draggable from 'vuedraggable'
import EchCol from '@/components/lt/codeGenerator/echComponents/EchCol'
import EchRow from '@/components/lt/codeGenerator/echComponents/EchRow'
import EchForm from '@/components/lt/codeGenerator/echComponents/EchForm'
import EchGridForm from '@/components/lt/codeGenerator/echComponents/EchGridForm'
import EchFormCol from '@/components/lt/codeGenerator/echComponents/EchFormCol'
import EchLabel from '@/components/lt/codeGenerator/echComponents/EchLabel'
import EchTable from '@/components/lt/codeGenerator/echComponents/EchTable'
import EchTree from '@/components/lt/codeGenerator/echComponents/EchTree'
import EchButtonItem from '@/components/lt/codeGenerator/echComponents/EchButtonItem'
import EchButton from '@/components/lt/codeGenerator/echComponents/EchButton'
import EchTab from '@/components/lt/codeGenerator/echComponents/EchTab'
import EchTabPane from '@/components/lt/codeGenerator/echComponents/EchTabPane'
import EchQueryForm from '@/components/lt/codeGenerator/echComponents/EchQueryForm'
import EchTag from '@/components/lt/codeGenerator/echComponents/EchTag'
import EchLineChar from '@/components/lt/codeGenerator/echComponents/EchLineChar'
import EchBarChar from '@/components/lt/codeGenerator/echComponents/EchBarChar'
import EchPieChar from '@/components/lt/codeGenerator/echComponents/EchPieChar'
import EchMap from '@/components/lt/codeGenerator/echComponents/EchMap'
import {SysMixin} from '@/mixins/SysMixin'

export default {
    name:'pageGenerator',
    components:{draggable,EchCol,EchRow,EchForm,EchLabel,EchTable,EchTree,EchButtonItem,EchButton,EchTab,EchTabPane,EchQueryForm,EchGridForm,EchFormCol,EchTag,EchLineChar,EchBarChar,EchPieChar,EchMap},
    mixins:[SysMixin],
    props:{
       
        echoData:{
            type:Object,
            default:()=>{},
            required:true
        }
       
    },
    data(){
        return{
            pageSetting,
            canvasDraggableOption: {
                group: {
                    name: 'canvasGroup',
                    put: ['componentLibraryGroup', 'canvasGroup'],//拖入
                    pull:false,//拖出
                 
                },
                animation: 150,
                ghostClass:'ghost',
                chosenClass:'chosen',
                filter:".itemLabel",
                emptyInsertThreshold:500
            },
        }
    },
   
    created(){
        
    },
    computed:{
        classObject(){
            return function(item){
                if(item.type==pageSetting.常量.画布组件.标题){
                    return "itemLabel"
                }else if(item.echoComponent==pageSetting.常量.画布组件.栅格行){
                    return "layout-row"
                }else if(item.echoComponent==pageSetting.常量.画布组件.栅格列 || item.echoComponent==pageSetting.常量.画布组件.网格表单栅格列){
                    return "layout-col"
                }else if(item.echoComponent==pageSetting.常量.画布组件.按钮){
                    return ""
                }else if(item.echoComponent==pageSetting.常量.画布组件.标签页){
                    return "component-tab"
                }else if(item.echoComponent==pageSetting.常量.画布组件.查询表单){
                    return "component-queryForm"
                }else if(item.echoComponent==pageSetting.常量.画布组件.按钮组){
                    return "component-button"
                }else if(item.echoComponent==pageSetting.常量.画布组件.标签){
                    return "component-tag"
                }
                return "itemDiv"
            }
        }
    },
    methods:{
        /**
         * 点击标题时，获取属性信息
         */
        onChoose(item){
            this.$emit('handlerChoose',item)
        },
        onDelete(item){
            this.$emit('handlerDelete',item)
        },
        onMove(e){
            //保证拖拽的时候，不能排在标题之前
            if(e.relatedContext.element.type==pageSetting.常量.画布组件.标题 && e.draggedContext.futureIndex==0){
                return false
            }
            return true
        },
        onChange(val){
            
        },
        setTableAction(text,record,item,h){
            let actionComponent = []
            item.action.map(a=>{
                actionComponent.push(h('a',{},a.actionName))
                actionComponent.push(h('a-divider',{props:{type:'vertical'}}))
            })
            if(actionComponent.length>0){
               actionComponent = actionComponent.slice(0,-1)
            }
            return actionComponent
        },
        
       /**
        * 
        */
        getEchoData(h,components,element){
            return(
                <draggable list={components} options={this.canvasDraggableOption} move={this.onMove}>
                    {
                        components.map((item,index)=>{
                            //其实每个都有components 并且默认里面有一个标题,按钮没有标题
                            if(item["components"]&& item["components"].length>0){
                                if(pageSetting.常量.画布组件.表格==item["echoComponent"]){
                                    
                                    let scopedSlots = {}
                                     
                                    item.props.columns.map(c=>{
                                        if(c["scopedSlots"] && c["scopedSlots"]["customRender"]){
                                            if(c["dictCode"]){
                                                //如果是下拉
                                                scopedSlots[c["scopedSlots"]["customRender"]]=(text,record)=>{
                                                    return this.dictText(c["dictCode"],text)
                                                }
                                            }else if(c["scopedSlots"]["customRender"]==pageSetting.常量.表格操作的插槽名){
                                                scopedSlots[c["scopedSlots"]["customRender"]]=(text,record) => h('span',this.setTableAction(text,record,item,h))
                                            }
                                            
                                        }

                                    })
                                    return(h(item.echoComponent,
                                    {
                                        props:item.props||{},class:this.classObject(item),
                                        scopedSlots:scopedSlots
                                    },
                                    [this.getEchoData(h,item["components"],item)]))
                                }else{
                                    return(h(item.echoComponent,
                                    {
                                        props:item.props||{},class:this.classObject(item),
                                       
                                    },
                                    [this.getEchoData(h,item["components"],item)]))
                                }
                                
                            }else{
                                if(item.type==pageSetting.常量.画布组件.标题){
                                    return(h(item.echoComponent,{props:{component:element},class:this.classObject(item),on:{click:()=>{this.onChoose(element)},delete:()=>{this.onDelete(element)}}},[item.label]))
                                }else if(item["echoComponent"]==pageSetting.常量.画布组件.按钮){
                                    return(h(item.echoComponent,{props:item.props||{},on:{click:()=>{this.onChoose(item)},dblclick:()=>{this.onDelete(item)}}},[item.props["title"] || '按钮']))
                                }else {
                                    return(h(item.echoComponent,{props:item.props||{}}))
                                }
                                
                            }
                            
                        })
                    }
                </draggable>
            )
        }
      
    },
    render: function(h) {
        return(
            <div>
                {this.getEchoData(h,this.echoData.components,this.echoData)}
            </div>
        )
    }
}
</script>

<style scoped>
    .canvasWrapper{
        width:100%;height:80vh;
    }
     .chosen{
        border: var(--primary-color) 2px solid !important; 
       
    }
     .ghost {
        border: solid 1px var(--primary-color) !important;
    }
    .itemDiv{
        border: rgb(209, 208, 208) 1px dashed ;padding: 10px;min-height: 200px;overflow: auto;margin-bottom: 10px;
    }
    .itemLabel{
        color: var(--primary-color);
        font-size: 16px;
        margin-bottom: 14px;
    }
   
    .layout-row{
        border: rgb(209, 208, 208) 1px dashed ;
        min-height:150px;
        padding: 10px;
        margin-bottom: 10px;
        
        
    }
    .layout-col{
        border: rgb(209, 208, 208) 1px dashed ;
        min-height:150px;
        padding: 10px;
    }

    .component-button{
        border: rgb(209, 208, 208) 1px dashed ;padding: 10px;height: 100px;
    }
    .component-tab{
        border: rgb(209, 208, 208) 1px dashed ;padding: 10px;min-height: 200px;max-height: 500px; overflow: auto;
    }
    .component-queryForm{
        border: rgb(209, 208, 208) 1px dashed ;padding: 10px;min-height: 100px;max-height: 260px; overflow: auto;
    }
    .component-tag{
        border: rgb(209, 208, 208) 1px dashed ;padding: 10px;height: 80px;
    }

  
    
</style>